/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {Alert, Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import LoginPage from "./LoginPage";
import RegisterPageOne from "./RegisterPageOne"
import RegisterPageTwo from "./RegisterPageTwo"
import RegisterPageThree from "./RegisterPageThree"
import MainTab from "./../main/Main"
import IndexArticle from "./../main/index/IndexArticle"
import StyleManProfile from "./../service/StyleManProfile"
import ChatPage from "./../service/ChatPage"
import MyUserList from "./../main/my/MyUserList"
import MyDedail from "./../main/my/MyDedail"
import MyEditList from "./../main/my/MyEditList"
import MyEditPass from "./../main/my/MyEditPass"
import MyEditPic from "./../main/my/MyEditPic"
import MyEditStyle from "./../main/my/MyEditStyle"
import MyOrderList from "./../main/my/MyOrderList"
import MyOrderDedail from "./../main/my/MyOrderDedail"
import AddressList from "./../main/my/AddressList"
import AddressEdit from "./../main/my/AddressEdit"
import SearchPage from "./../service/SearchPage"
import {StackNavigator} from 'react-navigation';
import utils from './../utils/utils';
import MyChatList from "../main/my/MyChatList";
import ShopList from "./../main/shop/ShopList";
import ShopDetail from "./../main/shop/ShopDetail";
import ShopOrder from "./../main/shop-car/ShopOrder";
import ShopOrderPay from "./../main/shop-car/ShopOrderPay";

class RegisterLoginPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loginButStatus: false,
            registerButStatus: false,
            xTokenStatus: null,
        };
        // this._registerHXListener();
    }

    /*登录按钮验证*/
    loginButClick = async () => {
        if (!this.state.loginButStatus) {
            await this.setState({loginButStatus: true,})
            setTimeout(async () => {
                await this.setState({loginButStatus: false})
            }, 1500);
            let {navigate} = this.props.navigation;
            navigate('LoginNav')
        } else {
            Alert.alert("警告", "点击频繁")
        }
    };
    /*注册按钮验证*/
    registerButClick = async () => {
        if (!this.state.registerButStatus) {
            console.log(this.state.registerButStatus)
            await this.setState({registerButStatus: true,})
            setTimeout(async () => {
                await this.setState({registerButStatus: false})
            }, 1500);
            let {navigate} = this.props.navigation;
            navigate('RegisterOneNav');
        } else {
            Alert.alert("警告", "点击频繁")
        }
    };

    render() {
        return (
            <View style={styles.container}>

                <View style={styles.pageView}>
                    <View style={styles.imgView}><Image source={require('../../img/da3x.png')}
                                                        style={styles.img}/></View>
                    <View style={styles.textView}><Text style={styles.text}>这样搭男士衣品购置行家</Text></View>
                    <View style={styles.textEView}><Text style={styles.textE}>ZYD MEN’S STYLEING CAPTAIN</Text></View>
                    <View style={styles.textEView}><Text style={styles.textE}>SINCE 2016.</Text></View>

                    <TouchableOpacity style={styles.TouchButton} onPress={this.loginButClick}>

                        <View style={styles.TouchButtonItemView}><Text style={styles.TouchButtonText}>登录</Text>
                            <Text style={styles.TouchButtonTextE}>SIGN IN</Text>
                        </View>
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.TouchButton} onPress={this.registerButClick}>
                        <View style={styles.TouchButtonItemView}>
                            <Text style={styles.TouchButtonText}>注册</Text>
                            <Text style={styles.TouchButtonTextE}>CREATE ACCOUNT</Text>
                        </View>
                    </TouchableOpacity>

                    <View style={styles.bottomView}>
                        <View><Image source={require('../../img/yi_jia.png')} style={styles.imgViewBottom}/></View>
                        <View><Text style={styles.textBottom}>上海辰衣商务信息咨询有限公司</Text></View>
                    </View>

                </View>
            </View>

        );
    }
};


const ZYDNav = StackNavigator({
    RegisterLoginNav: {
        screen: RegisterLoginPage,
        navigationOptions: {
            header: null,
        }
    },
    LoginNav: {
        screen: LoginPage,
        navigationOptions: {
            title: "登录 SIGN IN",
            headerStyle: {
                backgroundColor: '#F6F6F6',
            },
            headerTitleStyle: {
                alignSelf: 'center',
                fontSize: utils.setSpText(17),
            },
            headerRight: <TouchableOpacity/>,
        }
    },
    RegisterOneNav: {
        screen: RegisterPageOne,
        navigationOptions: {
            title: "注册 CREATE ACCOUNT",
            headerStyle: {
                backgroundColor: '#F6F6F6',
            },
            headerTitleStyle: {
                alignSelf: 'center',
                fontSize: utils.setSpText(17),
            },
            headerRight: <TouchableOpacity/>
        }
    },
    RegisterPageTwoNav: {
        screen: RegisterPageTwo,
        navigationOptions: {
            title: "注册 CREATE ACCOUNT",
            headerStyle: {
                backgroundColor: '#F6F6F6',
            },
            headerTitleStyle: {
                alignSelf: 'center',
                fontSize: utils.setSpText(17),
            },
            headerRight: <TouchableOpacity/>
        }
    },
    RegisterPageThreeNav: {
        screen: RegisterPageThree,
        navigationOptions: {
            title: "注册 CREATE ACCOUNT",
            headerStyle: {
                backgroundColor: '#F6F6F6',
            },
            headerTitleStyle: {
                alignSelf: 'center',
                fontSize: utils.setSpText(17),
            },
            headerRight: <TouchableOpacity/>
        }
    },
    SearchPageNav: {
        screen: SearchPage,
    },
    MyUserListNav: {
        screen: MyUserList,
    },
    MyChatListNav: {
        screen: MyChatList,
    },
    MyDedailNav: {
        screen: MyDedail,
    },
    MyEditListNav: {
        screen: MyEditList,
    },
    MyEditPassNav: {
        screen: MyEditPass,
    },
    MyEditPicNav: {
        screen: MyEditPic,
    },
    MyEditStyleNav: {
        screen: MyEditStyle,
    },
    MyOrderListNav: {
        screen: MyOrderList,
    },
    MyOrderDedailNav: {
        screen: MyOrderDedail,
    },
    AddressListNav: {
        screen: AddressList,
    },
    AddressEditNav: {
        screen: AddressEdit,
    },
    ChatPageNav: {
        screen: ChatPage,
    },
    MainTabNav: {
        screen: MainTab,
    },
    IndexArticleNav: {
        screen: IndexArticle,
    },
    ShopListNav: {
        screen: ShopList,
    },
    ShopDetailNav: {
        screen: ShopDetail,
    },
    ShopOrderNav: {
        screen: ShopOrder,
    },
    ShopOrderPayNav: {
        screen: ShopOrderPay,
    },
    StyleManProfileNav: {
        screen: StyleManProfile,
        navigationOptions: {
            title: "搭配师",
            headerStyle: {
                backgroundColor: '#F6F6F6',
            },
            headerTitleStyle: {
                alignSelf: 'center',
                fontSize: utils.setSpText(17),
            },
            headerRight: <TouchableOpacity/>
        }
    },

}, {
    initialRouteName: "MainTabNav",
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
    },
    pageView: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-around',
        alignItems: 'center',
    },
    imgView: {
        alignItems: 'center',
        marginTop: utils.autoheight(170),
    },
    textView: {
        marginTop: utils.autoheight(24),
    },
    text: {
        fontSize: utils.setSpText(15),
    },
    textEView: {
        marginTop: utils.autoheight(3),
    },
    textE: {
        fontSize: utils.setSpText(13),
    },
    img: {
        width: utils.autoWidth(160),
        height: utils.autoheight(170)
    },
    TouchButton: {
        width: utils.autoWidth(320),
        height: utils.autoheight(50),
        borderColor: '#010101',
        borderWidth: utils.autoWidth(2),
        alignItems: 'center',
        marginTop: utils.autoheight(30),
    },
    TouchButtonItemView: {
        alignItems: 'center',
    },
    TouchButtonText: {
        fontSize: utils.setSpText(17),
        color: '#010101',
    },
    TouchButtonTextE: {
        fontSize: utils.setSpText(15),
        color: '#010101',
    },
    bottomView: {
        alignItems: 'center',
        marginBottom: utils.autoheight(10),
    },
    imgViewBottom: {
        width: utils.autoWidth(36),
        height: utils.autoheight(26),
        marginTop: utils.autoheight(33),
    },
    textBottom: {
        fontSize: utils.setSpText(11),
        color: '#A0A0A0',
    }
});

export default ZYDNav;